<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本信息</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--公共js-->
    <script src="../js/public.js"></script>
    <!--公共css-->
    <link rel="stylesheet" href="../css/pubic.css">
    <!--本页面css-->
    <link rel="stylesheet" href="../css/0-index.css">
    <!--引入选择组件的css以及js-->
    <link rel="stylesheet" href="../css/mobileSelect.less.css">

</head>
<body style="background: #fff">
<div class="info-box">
    <header><i class="go"></i>基本信息</header>
    <div class="box-con">
        <ul>
            <li>
                <a href="javascript:;">
                    <span>昵称</span>
                    <p>请输入</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>性别</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>出生日期</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>身高</span>
                    <p>请输入</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>体重</span>
                    <p>请输入</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>籍贯</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>户口</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>户口</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>现居地</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>最高学历</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>毕业院校</span>
                    <p>请输入</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>婚姻状况</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>职业</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>单位性质</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>年收入</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>房产</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>车辆</span>
                    <p>请选择</p>
                    <i></i>
                </a>
            </li>
        </ul>
    </div>
</div>
<!--jquery.js-->
<script src="../js/jquery-3.0.0.min.js"></script>
<!--引入handlebars渲染模板-->
<script src="../js/handlebars-v4.0.10.js"></script>
<!--接口配置文件-->
<script src="../js/config.js"></script>
<!--引入本页面js-->
<script src="../js/index.js"></script>
<script src="../js/mobileSelect.min.js"></script>
<script>
    $('.go').on('click', function () {
        history.go(-1)
    });
    var weekdayArr1 = ['2016', '2017', '2018'];
    var weekdayArr2 = ['1', '2', '3', '4'];
    var weekdayArr3 = ['1', '2'];
    var weekdayArr = ['男', '女'];
    var Li = $('p');
    for (var i = 0; i < Li.length; i++) {
//        给每一个
        Li[i].id = 'p' + (i + 1);
    }
    Li.each(function (index, item) {
        var _thisId = $(item).attr('id');
        console.log(_thisId);
        if (_thisId == 'p2') {
//             console.log('我点了第二个p')
            var mobileSelect1 = new MobileSelect({
                trigger: '#p2',
                title: '性别',
                wheels: [
                    {data: weekdayArr}
                ],
                position: [1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
                transitionEnd: function (indexArr, data) {
//                 console.log(data);
                },
                callback: function (indexArr, data) {
                    console.log(data);
                }
            });
        }
        if (_thisId == 'p3') {
//             console.log('我点了第二个p')
            var mobileSelect1 = new MobileSelect({
                trigger: '#p3',
                title: '日期',
                wheels: [
                    {data: weekdayArr1},
                    {data: weekdayArr2},
                    {data: weekdayArr3},

                ],
                position: [1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
                transitionEnd: function (indexArr, data) {
//                 console.log(data);
                },
                callback: function (indexArr, data) {
                    console.log(data);
                }
            });
        }
    });
</script>
</body>
</html>